<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>密码隐藏显示</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      h1 {
        margin: 0px auto;
        text-align: center;
      }

      .box {
        position: relative;
        width: 400px;
        height: 40px;
        /* height: 40px; */
        border-bottom: solid 1px #36cdff;
        margin: 20px auto;
      }

      .box input {
        position: absolute;
        width: 350px;
        height: 40px;
        border: 0;
        outline: none;
        font-size: 18px;
      }

      .box .icon {
        position: absolute;
        right: 0px;
        width: 50px;
        background: url(./icons.png) no-repeat -135px -1740px;
        height: 40px;
        /* background: url(./icons.png) no-repeat -135px -1290px; */
      }
    </style>
  </head>

  <body>
    <h1>显示隐藏密码</h1>
    <div class="box">
      <label for="">
        <input type="password" name="" id="" />
        <div class="icon"></div>
      </label>
    </div>
  </body>
  <script>
    //1.获取元素
    let inp = document.querySelector('input')
    let icon = document.querySelector('.icon')
    //2.绑定事件
    let flag = 1
    icon.onclick = () => {
      if (flag == 1) {
        flag = 0
        inp.type = 'text'
        icon.style.background = 'url(icons.png) no-repeat -135px -1290px'
        //此处结尾就别加 ;  号了会出错
      } else {
        flag = 1
        inp.type = 'password'
        icon.style.background = 'url(icons.png) no-repeat -135px -1740px'
      }
    }
  </script>
</html>
